<template>

  <div class="app-container" id="app">

    <el-form :inline="true"  class="demo-form-inline">

      <el-form-item>
        <el-button type="primary" @click="jumpToAddRecord()">维修信息登记</el-button>
        <el-button type="danger" :disabled="this.multipleSelection.length===0" @click="removeAll">维修信息删除</el-button>
      </el-form-item>
      <el-form-item>
        <div >
        <el-input placeholder="请输入内容" v-model="recordQuery.recordInfo" class="input-with-select" style="width: 400px">
          <el-select v-model="recordQuery.select" slot="prepend" placeholder="请选择" style="width: 100px">
            <el-option label="车牌号" value="1"></el-option>
            <el-option label="修理厂" value="2"></el-option>
            <el-option label="经办人" value="3"></el-option>
          </el-select>
          <el-button slot="append" icon="el-icon-search" @click="getList()"></el-button>
        </el-input>
      </div>
      </el-form-item>

    </el-form>
    <el-table
      :data="recordList"
      style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column prop="id" label="编号"  align="center" width="80%">
        <template slot-scope="scope">
          {{ (currentPage - 1) * pageSize + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column
        type="selection" width="80%" align="center">
      </el-table-column>
      <el-table-column prop="carNo" label="车牌号" align="center" >
      </el-table-column>

      <el-table-column prop="unitName" label="修理厂" align="center" >
      </el-table-column>
      <el-table-column prop="sendTime" label="送修时间" align="center" >
      </el-table-column>
      <el-table-column prop="estimateTime" label="预计取车时间" align="center" >
      </el-table-column>
    <el-table-column prop="getTime"  label="取车时间" align="center" >
      <template slot-scope="scope" >
        {{scope.row.getTime === null ?'未取车':scope.row.getTime}}
      </template>
      </el-table-column>
    <el-table-column prop="rname" label="经办人" align="center" >
      </el-table-column>
    <el-table-column  label="维修金额" align="center" >
      <template slot-scope="scope">
        {{scope.row.repairCost === null ?'未结算':scope.row.repairCost}}
      </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
            <el-button type="primary" size="mini" icon="el-icon-check" :disabled="scope.row.getTime !==null" @click="jumpToGetCar(scope.row.id)"
            >取车
            </el-button>
          <router-link :to="'/daily_work/edit_repair_record/'+scope.row.id">
            <el-button type="success" size="mini" icon="el-icon-edit"
            >修改
            </el-button>
          </router-link>
        </template>
      </el-table-column>

      <el-table-column label="详细信息" align="center" width="80%" >
        <template slot-scope="scope">
            <el-button type="text" slot="reference"  @click="getDetail(scope.row)">详细信息</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination

      layout="total, prev, pager, next, jumper"
      :current-page="currentPage"
      :page-size="pageSize"
      :total="total"
      align="center"
      style="padding: 30px 0 ; text-align: center"
      @current-change="getList"
    >
    </el-pagination>
  </div>


</template>

<script>
  import api_repair from '@/api/repair_record';
  export default {
    name: "repair_record",
    data() {
      return {
        recordList: [],
        currentPage: 1,
        pageSize: 5,
        total: 0,
        recordQuery: {
          select: "",
          recordInfo: ""
    },
        select: "",
        multipleSelection: [],
      }
    },
    created() {
      this.getList();
    },
    methods: {
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      getList(currentPage =1 ) {
        this.currentPage = currentPage;
        api_repair.getRecordList(this.currentPage,this.pageSize,this.recordQuery)
          .then(Response => {
            this.recordList = Response.data.list;
            this.total = Response.data.total;
          })
      },
      jumpToAddRecord(){
        this.$router.push({path: "/daily_work/add_repair_record"});
      },
      jumpToGetCar(id){
        this.$router.push({path: "/daily_work/add_get_car_record/"+id});
      },
      removeAll(){
        console.log(this.multipleSelection)
        this.$confirm("此操作将永久删除该条信息, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          this.multipleSelection.forEach((item,i,multipleSelection) =>{
            api_repair.remove(item.id).then((Response) => {
              this.getList();
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            })
          })
        })
      },
      getDetail(tmp) {
      if (tmp.getTime ==null){
        this.$message({
          type: "warning",
          message: "请先取车",
        });
      }else{
        this.$router.push({path: "/daily_work/detail_repair_record/"+tmp.id});
      }
      }

    }
  }
</script>

<style scoped>

</style>
